import { selectMonitorhcRecord } from '@/services/api/api-monitorhc';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { DrawerForm } from '@ant-design/pro-form';
import { Descriptions, Divider, Spin, Tag, Typography } from 'antd';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import DetailMonitorArticleContent from './DetailMonitorArticleContent';
import styles from './DetailMonitorArticleContent.less';

const { Paragraph, Text } = Typography;
interface DetailsMonitorArticleProps {
  record: MonitorhcData.RecordPage;
  onRefurbish: () => void;
}

const DetailsMonitorArticle: React.FC<DetailsMonitorArticleProps> = ({ record, onRefurbish }) => {
  const access = useAccess();
  const [loading, setLoading] = useState(false);
  const [clickId, setClickId] = useState('');

  const [details, setDetailsState] = useState<MonitorhcData.RecordSelect>();

  const [html, setHtmlValueState] = useState<string>('');

  const loadSelectMonitorhcRecord = async () => {
    const res = await selectMonitorhcRecord({
      id: record?.id,
    });
    if (res.code === 0) {
      setDetailsState(res.data);
      if (
        Array.isArray(res.data?.greenText?.inspectWords) &&
        res.data.greenText.inspectWords.length > 0
      ) {
        let original = res.data.greenText.html
          .replaceAll(`class="word-mark-error-major"`, `class="${styles['word-mark-error-major']}"`)
          .replaceAll(
            `class="word-mark-error-critical"`,
            `class="${styles['word-mark-error-critical']}"`,
          )
          .replaceAll(
            `class="word-mark-error-blocker"`,
            `class="${styles['word-mark-error-blocker']}"`,
          );
        console.log(original);

        setHtmlValueState(original);
      } else {
        setHtmlValueState(res.data?.greenText?.html);
      }
    }
  };

  return (
    <DrawerForm
      key="details_details_drawer_form"
      title={
        <>
          {(record.state == undefined || record.state == 0) ? (
            <Tag icon={<CheckCircleOutlined />} color={'success'}>
              正常
            </Tag>
          ) : record.state == 1 ? (
            <Tag icon={<InfoCircleOutlined />} color={'warning'}>
              {'警告'}
            </Tag>
          ) : (
            <Tag icon={<CloseCircleOutlined />} color={'error'}>
              {'问题'}
            </Tag>
          )}
          {/* <Tag
            icon={
              record?.disposeState == 1 ? (
                <QuestionCircleOutlined />
              ) : record?.disposeState == 2 ? (
                <ExclamationCircleOutlined />
              ) : (
                <CheckCircleOutlined />
              )
            }
            color={
              record?.disposeState == 1
                ? 'processing'
                : record?.disposeState == 2
                ? '#f50'
                : 'success'
            }
          >
            {record?.disposeState == 1
              ? '无需处置'
              : record?.disposeState == 2
              ? '需要处置'
              : '处置完成'}
          </Tag> */}
          {details?.dataName}
        </>
      }
      drawerProps={{
        destroyOnClose: true,
        width: 1300,
      }}
      trigger={<a>{record?.dataName}</a>}
      onOpenChange={(visible) => {
        if (visible) {
          loadSelectMonitorhcRecord();
        } else {
        }
      }}
      submitter={false}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <>
            {details?.disposeState == 3 && details?.disposeContent && (
              <>
                <Descriptions title="处置人">
                  <Descriptions.Item label="单位">
                    {details?.disposeContent?.organizationName}
                  </Descriptions.Item>
                  <Descriptions.Item label="姓名">
                    {details?.disposeContent?.accountName}
                  </Descriptions.Item>
                  <Descriptions.Item label="处置方案">
                    {details?.disposeContent?.scheme == 1
                      ? '不需要处理'
                      : details?.disposeContent?.scheme == 2
                        ? '下架不再发稿'
                        : details?.disposeContent?.scheme == 3
                          ? '下架修改重新发稿'
                          : '其他方案'}
                  </Descriptions.Item>
                </Descriptions>
                <Typography.Paragraph>
                  <blockquote>{details?.disposeContent?.content}</blockquote>
                </Typography.Paragraph>
                <Divider />
              </>
            )}
            <Descriptions title="文章信息">
              <Descriptions.Item label="责任单位">
                {record.auditSourceResponsibles.map((item => item.responsibleOrganizationName)).join(',')}
              </Descriptions.Item>
              <Descriptions.Item label="平台">{details?.datahubChannelName}</Descriptions.Item>
              <Descriptions.Item label="账号">{details?.datahubSourceName}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{details?.dataReleaseTime}</Descriptions.Item>
              <Descriptions.Item label="查看原文">
                <a href={details?.dataUrl} target="_blank" style={{ width: '90%' }}>
                  <Paragraph copyable ellipsis>
                    {details?.dataUrl}
                  </Paragraph>
                </a>
              </Descriptions.Item>
            </Descriptions>
            <Divider />

            <Descriptions title="相关负责人">
              {details.auditSourceResponsibles &&
                details.auditSourceResponsibles.map((item) => {
                  return (
                    <>
                      <Descriptions.Item label="负责人">{item.responsibleAccountName}</Descriptions.Item>
                      <Descriptions.Item label="负责人联系方式">
                        {item?.responsibleAccountPhone}
                      </Descriptions.Item>
                      <Descriptions.Item label="负责单位">
                        {item?.responsibleOrganizationName}
                      </Descriptions.Item>
                    </>
                  );
                })}
            </Descriptions>
            <Divider />
            {html && (
              <DetailMonitorArticleContent
                name={details.dataName}
                content={html}
                errorWords={details.greenText.inspectWords ?? []}
                onRefurbish={function (): void { }}
              />
            )}
          </>
        )}
      </Spin>
    </DrawerForm>
  );
};

export default DetailsMonitorArticle;
